import React from 'react'
import '../css/main.css'
import {useNavigate} from 'react-router-dom'
import axios from '../../../../axios/axios';
export default function item(porps) {
  const navigate = useNavigate()
  let add=()=>{
    
   
    axios.post('http://localhost:3000/fan/addcart',{data:porps.item}).then((res)=>{
      console.log(res.data)
      navigate('/fan/addcart', { state: porps.item })
    })
  }
  return (
    <div className="fruit-container">
    <div className='fruit-top'>
      <img src={porps.item.image[0]} alt="" />
    </div>
    <div className='fruit-buttom'>
      <p className='fruit-title'>{porps.item.name}</p>
      <div className='fruit-text'>
        <p>纯天然种植</p>
        <p>自然生长</p>
        <p>纯种绿色</p>
      </div>
      <div className='fruit-price'>
        <p>￥{porps.item.price}</p>
        <div onClick={()=>{
          add()
        }
        }>
           加入购物车
        </div>
      </div>
    </div>
    </div>
  )
}
